<template>
  <div class="visit-appointment">
    <content-header title="参观预约"></content-header>

    <div class="xui-margin-top tab-box">
      <tab-bar @tab-click="handleClick" :btns="tabs"></tab-bar>
    </div>

    <!-- 个人预约 -->
    <div v-if="activeName === 'personal'">
      
      <!-- 报名须知 -->
      <div v-if="gr.curTab == 0" class="notice-wrap">
        <div v-html="gr.notice"></div>
        <div class="btn-wrap xui-margin-top">
          <p class="xui-padding-right-xxl">
            <el-checkbox v-model="gr.isAgree" >我已阅读并同意</el-checkbox>
          </p>
          <div class="xui-margin-top-xs xui-text-center">
            <el-button type="primary" :disabled="!gr.isAgree" @click="nextStep('gr')">开始预约</el-button>
          </div>
        </div>
      </div>
      <!-- 报名表格 -->
      <div v-if="gr.curTab == 1">
        <div class="cb-step-wrap style1 xui-margin-top-xxl xui-padding-top">
          <ul>
            <li>1.网上预约</li>
            <li>2.电子验票</li>
            <li>3.入馆参观</li>
          </ul>
        </div>
        <div class="cb-border-top-2 xui-margin-top-sm">
          <div class="xui-margin-top">
            <span class="xui-font-size-sm xui-margin-right-sm">预约日期</span>
            <el-date-picker
              v-model="gr.visitorInfo.visitDate"
              type="date"
              placeholder="选择预约日期"
              :picker-options="grPickerOption"
              value-format="timestamp"
            >
            </el-date-picker>
          </div>
          <div class="xui-fc xui-margin-top">
            <h3 class="xui-font-size-md xui-fl" style="line-height:30px;">添加参观人</h3>
            <el-button :disabled="gr.visitorInfo.data.length >= 3" type="primary" size="small" class="xui-font-md xui-fr xui-margin-right-sm" @click="addPersonalVisitor">新增</el-button>
          </div>
          <div class="people-form form-wrap xui-fc" v-for="(item, index) in gr.visitorInfo.data" :key="index">
            <p class="xui-margin-bottom cb-border-bottom color-primary " style="padding:7px 0 7px 10px"> 参观人 <span class="color-gray">[{{index + 1}}/3]</span></p>
            <el-button @click="deletePersonalVisitor(index)" v-if="index > 0" class="delete-people-btn xui-font-size-md" type="warning" size="small" icon="el-icon-close"></el-button>
            <el-form
              :ref="`personalVisitPeople-${index}`"
              size="medium"
              :rules="gr.rules"
              :inline="true"
              :model="item"
              label-width="117px">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="item.name" placeholder="姓名" ></el-input>
              </el-form-item>
              <el-form-item label="证件类型" class="cardType" prop="cardTypeId">
                <el-select v-model="item.cardTypeId" placeholder="请选择证件类型" class="xui-padding-right-0">
                  <el-option label="身份证" value="SFZ"></el-option>
                  <el-option label="港澳通行证" value="GATXZ"></el-option>
                  <el-option label="护照" value="HZ"></el-option>
                  <el-option label="军官证" value="JGZ"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="证件号码" prop="cardId">
                <el-input v-model="item.cardId" placeholder="请输入证件号码"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="item.mobile" placeholder="请输入手机号码"></el-input>
              </el-form-item>
              <el-form-item label="邮箱地址" prop="email">
                <el-input v-model="item.email" placeholder="请输入邮箱地址"></el-input>
              </el-form-item>
              <el-form-item label="携带儿童数量" prop="childNum">
                <el-select v-model.number="item.childNum" placeholder="请选择" style="width:202px">
                  <el-option
                    :label="0"
                    :value="0">
                  </el-option>
                  <el-option
                    v-for="item in 3"
                    :key="'childNum'+item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <p class="color-gray">提示：您最多可以添加3名参观者。</p>
          <div class="xui-text-center">
            <el-button type="primary" size="medium" plain @click="gr.curTab = 0">上一步</el-button>
            <el-button type="primary" size="medium" @click="submitPersonalVisitor" :loading="gr.loading">提 交</el-button>
          </div>
           </div>
      </div>
    </div>

    <!-- 团队预约 -->
    <div v-if="activeName === 'company'">
      <div v-if="td.curTab == 0" class="notice-wrap">
        <div v-html="td.notice"></div>
        <div class="btn-wrap xui-margin-top">
          <p class="xui-padding-right-xxl">
            <el-checkbox v-model="td.isAgree" >我已阅读并同意</el-checkbox>
          </p>
          <div class="xui-margin-top-xs xui-text-center">
            <el-button type="primary" :disabled="!td.isAgree" @click="nextStep('td')">开始预约</el-button>
          </div>
        </div>
      </div>

      <div v-if="td.curTab == 1">
        <div class="cb-step-wrap style2 xui-margin-top-xxl xui-padding-top">
          <ul>
            <li>1.填写信息</li>
            <li>2.上传团队表格</li>
            <li>3.确认预约</li>
          </ul>
        </div>
        <div class="cb-border-top-2 xui-margin-top-sm" >
          <div class="form-wrap">
            <p class="xui-margin-bottom cb-border-bottom color-primary " style="padding:7px 0 7px 10px">1.填写信息</p>
            <el-form
            class="xui-fc xui-grid-box xui-padding-right"
            :model="td.visitorInfo"
            ref="companyVisit"
            :rules="td.rules"
            size="medium"
            label-width="117px"
            >
              <div class="xui-grid-box">
                <el-form-item label="团队名称" prop="groupName" class="xui-grid-equal-6">
                  <el-input v-model="td.visitorInfo.groupName" placeholder="请输入团队名称" ></el-input>
                </el-form-item>
                <el-form-item label="参观日期" prop="visitDate" class="xui-grid-equal-6">
                  <el-date-picker
                    v-model="td.visitorInfo.visitDate"
                    type="date"
                    placeholder="请选择预约日期"
                    :picker-options="tdPickerOption"
                    value-format="timestamp"
                    class="width-100"
                  ></el-date-picker>
                </el-form-item>
              </div>
              <div class="xui-grid-box">
                <el-form-item label="导游姓名" prop="guideName" class="xui-grid-equal-6">
                  <el-input v-model="td.visitorInfo.guideName" placeholder="请输入导游姓名"></el-input>
                </el-form-item>
                <el-form-item label="导游身份证号" prop="guideIdCard" class="xui-grid-equal-6">
                  <el-input v-model="td.visitorInfo.guideIdCard" placeholder="请输入导游身份证号"></el-input>
                </el-form-item>
              </div>
              <div class="xui-grid-box">
                <el-form-item label="手机号码" prop="guideTelnum" class="xui-grid-equal-6">
                  <el-input v-model="td.visitorInfo.guideTelnum" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="guideEmail" class="xui-grid-equal-6">
                  <el-input v-model="td.visitorInfo.guideEmail" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>

          <div class="form-wrap xui-margin-top">
            <p class="cb-border-bottom color-primary " style="padding:7px 0 7px 10px">2.上传团队表单</p>
            <div class="xui-padding" style="width:50%">
              <p>请下载团队表格模版，填写完整后上传</p>
              <div class="xui-margin-vertical">
                <a href="../../../../static/团队预约信息.xls" class="color-blue" download="团队预约信息.xls">下载团队表格模版</a>
              </div>
              <el-upload
                ref="upload"
                :action="tdUploadUrl"
                name="groupTable"
                :data="td.visitorInfo"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :on-progress="formUploading"
                :on-change="fileChange"
                :on-remove="handleRemove"
                :auto-upload="false"
                :limit="1"
                :file-list="fileList"
                :multiple="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </div>
          </div>
          <div class="xui-text-center">
            <el-button type="primary" size="medium" plain @click="td.curTab = 0">上一步</el-button>
            <el-button type="primary" size="medium" @click="submitCompanyVisitor" :loading="td.loading">提 交</el-button>
          </div>
        </div>
      </div>

    </div>

    <!-- 个人预约 二维码对话框 -->
    <el-dialog
      title="门票二维码"
      :visible.sync="gr.dialogVisible"
      center
      width="580px">
      <p class="xui-font-size-xl color-primary xui-text-center"><i class="iconfont icon-check xui-font-size-xxl" style="position:relative;top:2px"></i> <span>预约成功</span></p>
      <p class="xui-text-center color-primary xui-margin-top-xs"> 凭此二维码可自助验票入馆 </p>
      <el-carousel :autoplay="false" trigger="click" arrow="always" indicator-position="none">
        <el-carousel-item v-for="(item,index) in gr.saveRes" :key="index">
          <div class="xui-text-center xui-margin-top-sm">
            <qrcode
            :id="`gr-qrcode-${index}`"
            :value="item.ticketId"
            tag='img'
            :options="{ size: 130 }">
            </qrcode>
            <p class="color-gray">{{index+1}}/{{gr.saveRes.length}} </p>
            <p>
              <a :id="`gr-download-${index}`" @click="saveQrcode(index,'gr')" class="save-qr-btn">保存二维码</a>
            </p>
            <div style="text-align:left;margin-left:130px; margin-bottom:30px;">
              <p>预约日期：{{item.visitDate}}</p>              
              <p v-if="item.idCard">证件号码：{{item.idCard.substr(0,6) + '********' + item.idCard.substr(-4,4)}} (<span class="color-primary">{{item.name}}</span>)</p>
              <p v-if="item.ticketId">预约票号：{{item.ticketId  }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="gr.dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>

    <!-- 团队预约 二维码对话框 -->
    <el-dialog
      title="门票二维码"
      :visible.sync="td.dialogVisible"
      center
      width="580px">
      <p class="xui-font-size-xl color-primary xui-text-center"><i class="iconfont icon-check xui-font-size-xxl" style="position:relative;top:2px"></i> <span>预约成功</span></p>
      <p class="xui-text-center color-primary xui-margin-top-xs"> 凭此二维码可自助验票入馆 </p>
      <div class="xui-text-center xui-margin-top">
        <qrcode
        :value="td.saveRes.ticketId"
        v-if="td.saveRes.ticketId"
        tag="img"
        id="td-qrcode"
        :options="{ size: 130 }">
        </qrcode>
        <p>
          <a  :id="`td-download`" @click="saveQrcode(0,'td')" class="save-qr-btn">保存二维码</a>
        </p>
        <div style="text-align:left;margin-left:130px;">
          <p class="">预约日期：{{td.saveRes.visitDate}}</p>
          <p v-if="td.saveRes.guideIdCard" class="xui-margin-top">证件号码：{{td.saveRes.guideIdCard.substr(0,6) + "********" + td.saveRes.guideIdCard.substr(-4,4)}} (<span class="color-primary">{{td.saveRes.guideName}}</span>)</p>
          <p class="">预约票号：{{td.saveRes.ticketId}}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="td.dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import contentHeader from "@/components/widge/content-header";
import tabBar from "@/components/widge/tabs/tab-bar";
import { getDetail } from "@/api/detail";
import { getList, getCardType } from "@/api/list";
import { personalAppoint } from "@/api/appointment";
import { IdentityCodeValid } from "@/utils/validator";
import { getToken } from "@/utils/auth";
import Qrcode from "@xkeshi/vue-qrcode";
import { rootsUrl, addDate } from "@/utils";

export default {
  components: {
    "content-header": contentHeader,
    tabBar,
    qrcode: Qrcode
  },
  data() {
    return {
      fileList: [],
      gr: {
        notice: "暂无需知",
        visitorInfo: {
          sourceId: "MHWZ",
          visitDate: "",
          token: getToken(),
          data: [
            // {
            //   name: "",
            //   cardTypeId: "SFZ",
            //   cardType: "身份证",
            //   cardId: "",
            //   mobile: "",
            //   email: "",
            //   childNum: 0
            // }
          ]
        },
        rules: {
          name: [
            { required: true, message: "请输入参观者姓名", trigger: "blur" },
            { min: 2, message: "请输入正确的姓名", trigger: "blur" }
          ],
          cardTypeId: [
            { required: true, message: "请选择证件类型", trigger: "change" }
          ],
          cardId: [
            {
              required: true,
              message: "请输入证件号码",
              trigger: "blur"
            }
            // {
            //   // validator: validateID,
            //   message: "请输入正确的身份证号码！",
            //   pattern: /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/,
            //   trigger: "blur"
            // }
          ],
          mobile: [
            {
              required: true,
              message: "请输入参观者手机号码",
              trigger: "blur"
            },
            {
              pattern: /^1[3|4|5|6|7|8][0-9]\d{4,8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            },
            {
              len: 11,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],
          email: [
            { type: "email", message: "请输入正确的邮件地址", trigger: "blur" }
          ],
          childNum: [
            { type: "number", message: "请输入数字", trigger: "blur" },
            {
              type: "number",
              min: 0,
              max: 100,
              message: "最少0人，最多100人",
              trigger: "blur"
            }
          ]
        },
        loading: false,
        saveRes: [{}],
        dialogVisible: false,
        isAgree: false,
        curTab: 0
      },
      td: {
        notice: "暂无需知",
        visitorInfo: {
          sourceId: "MHWZ",
          userId: "ADMIN",
          token: getToken(),
          visitDate: "",
          groupName: "",
          guideName: "",
          guideIdCard: "",
          guideTelnum: "",
          guideEmail: ""
        },
        fileList: [],
        rules: {
          groupName: [
            { required: true, message: "请输入团队名称", trigger: "blur" },
            { min: 2, message: "请输入正确的团队名称", trigger: "blur" }
          ],
          visitDate: [
            {
              required: true,
              message: "请选择参观日期",
              trigger: "change"
            }
          ],
          guideName: [
            { required: true, message: "请输入参观者姓名", trigger: "blur" }
          ],
          guideIdCard: [
            {
              required: true,
              message: "请输入证件号码",
              trigger: "blur"
            },
            {
              // validator: validateID,
              message: "请输入正确的身份证号码！",
              pattern: /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/,
              trigger: "blur"
            }
          ],
          guideTelnum: [
            {
              required: true,
              message: "请输入参观者手机号码",
              trigger: "blur"
            },
            {
              pattern: /^1[3|4|5|6|7|8][0-9]\d{4,8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],
          guideEmail: [
            { type: "email", message: "请输入正确的邮件地址", trigger: "blur" }
          ]
        },
        loading: false,
        saveRes: {},
        dialogVisible: false,
        isAgree: false,
        curTab: 0
      },
      activeName: "personal",
      tabs: [
        {
          name: "personal",
          text: "个人预约"
        },
        {
          name: "company",
          text: "团队预约"
        }
      ],
      grPickerOption: {
        disabledDate(time) {
          let date = new Date();
          let dateArr = addDate(date, 0).split("-");
          let today = new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
          return time < today;
        }
      },
      tdPickerOption: {
        disabledDate(time) {
          let nowTime = new Date();
          let nowTimeMin =
            Number(nowTime.getHours()) * 60 + Number(nowTime.getMinutes());
          if (nowTimeMin > 16 * 60) {
            //超过16：00 不能预约明天的门票
            let date = new Date();
            let dateArr = addDate(date, 2).split("-");
            let today = new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
            return time < today;
          }

          return time.getTime() < Date.now();
        }
      },
      fileList: [],
      loading: false,
      types: []
    };
  },
  computed: {
    routeItem() {
      let routes = this.$store.getters.siteMap;
      let result;
      routes.forEach(route => {
        if (route.children) {
          route.children.forEach(child => {
            if (child.name == this.$route.name) {
              result = child;
            }
          });
        }
      });
      return result;
    },
    userId() {
      return this.$store.getters.userId;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
    tdUploadUrl() {
      return `${rootsUrl[2]}/cbticket/order/tdSave.shtml`;
    },
    defaultGrDate() {
      let _now = Date.now();
      let strDate = addDate(_now, 1);
      let arr = strDate.split("-");
      return Date.parse(new Date(arr[0], Number(arr[1]) - 1, arr[2]));
      // return arr[0] + "-" + (Number(arr[1]) - 1) + "-" + arr[2];
    },
    defaultTdDate() {
      let _now = Date.now();
      let nowTime = new Date();
      let nowTimeMin =
        Number(nowTime.getHours()) * 60 + Number(nowTime.getMinutes());
      if (nowTimeMin > 16 * 60) {
        let strDate = addDate(_now, 2);
        let arr = strDate.split("-");
        return Date.parse(new Date(arr[0], Number(arr[1]) - 1, arr[2]));
      }
      let strDate = addDate(_now, 1);
      let arr = strDate.split("-");
      return Date.parse(new Date(arr[0], Number(arr[1]) - 1, arr[2]));
      // return arr[0] + "-" + (Number(arr[1]) - 1) + "-" + arr[2];
    }
  },
  methods: {
    handleClick(tabName) {
      this.activeName = tabName;
    },
    addPersonalVisitor() {
      const visitor = {
        name: "",
        cardTypeId: "SFZ",
        cardType: "身份证",
        cardId: "",
        mobile: "",
        email: "",
        childNum: 0
      };
      if (this.gr.visitorInfo.data.length < 3) {
        this.gr.visitorInfo.data.push(visitor);
      }
    },
    deletePersonalVisitor(index) {
      this.gr.visitorInfo.data.splice(index, 1);
    },
    submitPersonalVisitor() {
      this.gr.loading = true;
      let validateResult = this.gr.visitorInfo.data.every((person, index) => {
        let form = this.$refs[`personalVisitPeople-${index}`][0];
        let result;
        form.validate(valid => {
          console.log("valid = ", valid);
          if (!valid) {
            this.$message({
              showClose: true,
              message: "预约失败，信息填写不正确",
              type: "error"
            });
            result = false;
          } else {
            result = true;
          }
        });
        return result;
      });
      console.log("validateResult", validateResult);
      if (!validateResult) {
        this.gr.loading = false;
        return false;
      }

      this.gr.visitorInfo.data.forEach(item => {
        switch (item.cardTypeId) {
          case "SFZ":
            item.cardType = "身份证";
            break;
          case "GATXZ":
            item.cardType = "港澳通行证";
            break;
          case "HZ":
            item.cardType = "护照";
            break;
          case "JGZ":
            item.cardType = "军官证";
        }
      });
      personalAppoint(this.gr.visitorInfo)
        .then(res => {
          if (res.flag === "-1") {
            this.gr.loading = false;
            this.$alert(res.msg, "提交失败", {
              confirmButtonText: "确定"
            });
          } else if (res.flag === "1") {
            this.gr.loading = false;
            this.gr.saveRes = res.data;
            this.$message({
              showClose: true,
              message: "预约成功",
              type: "success"
            });
            this.gr.dialogVisible = true;
          }
        })
        .catch(err => {
          console.log(err);
          this.gr.loading = false;
        });
    },
    submitCompanyVisitor() {
      console.log(this.fileList);
      if (!this.fileList.length > 0 && this.fileList !== null) {
        this.$message.error("请选择文件");
        return false;
      }
      let form = this.$refs["companyVisit"];
      form.validate(valid => {
        if (!valid) {
          this.$message({
            showClose: true,
            message: "预约失败，信息填写不正确",
            type: "error"
          });
          return false;
        } else {
          this.td.visitorInfo.userId = this.userId;
          this.td.loading = true;
          console.log(this.td);
          this.$refs.upload.submit();
        }
      });
    },
    uploadSuccess(response) {
      this.td.loading = false;
      this.$refs.upload.clearFiles();
      // this.td.fileList = [];
      if (response.flag == -1) {
        this.$alert(response.msg, "提交失败", {
          confirmButtonText: "确定"
        });
        setTimeout(() => {
          this.$refs.upload.clearFiles();
          this.fileList = [];
        }, 500);
      } else if (response.flag == 1) {
        this.$message({
          showClose: true,
          message: response.msg,
          type: "success"
        });
        this.td.saveRes = response.data[0];
        this.td.dialogVisible = true;
        setTimeout(() => {
          this.$refs.upload.clearFiles();
          this.fileList = [];
        }, 500);
      } else if (response.flag == 0) {
        this.$confirm("您还未登录，或者已被登出，请重新登录", "请登录", {
          confirmButtonText: "登录",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$store.dispatch("ToggleLoginDialog", true);
        });
      }
    },
    uploadError(err) {
      this.td.loading = false;

      // this.td.fileList = [];
      this.$message({
        showClose: true,
        message: err,
        type: "error"
      });
      setTimeout(() => {
        this.$refs.upload.clearFiles();
        console.log("when error", this.fileList);
      }, 500);
    },
    formUploading() {
      this.td.loading = true;
    },
    fileChange(file, fileList) {
      console.log("added file", file);
      console.log("added fileList", fileList);
      this.fileList = [];
      this.fileList.push(file);
    },
    handleRemove(file, fileList) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
    },
    saveQrcode(index, type) {
      //判断是否为Trident内核浏览器(IE等)函数
      function browserIsIe() {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
          return true;
        } else {
          return false;
        }
      }
      //创建iframe并赋值的函数,传入参数为图片的src属性值.
      function createIframe(imgSrc) {
        //如果隐藏的iframe不存在则创建
        if (document.getElementById("IframeReportImg").length === 0) {
          let iframe =
            '<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>';
          document.getElementsByTagName("body")[0].appendChild(iframe);
        }
        //iframe的src属性如不指向图片地址,则手动修改,加载图片
        if (document.getElementById("IframeReportImg").src != imgSrc) {
          document.getElementById("IframeReportImg").src = imgSrc;
        } else {
          //如指向图片地址,直接调用下载方法
          downloadImg();
        }
      }
      //下载图片的函数
      function downloadImg() {
        //iframe的src属性不为空,调用execCommand(),保存图片
        if (document.getElementById("IframeReportImg").src != "about:blank") {
          window.frames["IframeReportImg"].document.execCommand("SaveAs");
        }
      }
      //接下来进行事件绑定
      if (type === "gr") {
        var aBtn = document.getElementById(`gr-download-${index}`);
        var imgSrc = document.getElementById(`gr-qrcode-${index}`).src;
      } else if (type === "td") {
        var aBtn = document.getElementById(`td-download`);
        var imgSrc = document.getElementById(`td-qrcode`).src;
      }
      if (browserIsIe()) {
        //是ie等,绑定事件
        //调用创建iframe的函数
        createIframe(imgSrc);
      } else {
        aBtn.href = imgSrc;
        aBtn.download = `二维码-${index + 1}`;
      }
    },
    saveTdQrcode() {},
    addDefaultUserInfoForPerson() {
      let user = {
        name: this.userInfo.userName,
        cardTypeId: "SFZ",
        mobile: this.userInfo.mobile,
        email: this.userInfo.email,
        childNum: 0
      };
      this.gr.visitorInfo.data.push(user);
      this.td.visitorInfo.guideName = this.userInfo.userName;
      this.td.visitorInfo.guideTelnum = this.userInfo.mobile;
      this.td.visitorInfo.guideEmail = this.userInfo.email;
      console.log(this.userInfo);
      if (this.userInfo.codeType == "身份证") {
        this.td.visitorInfo.guideIdCard = this.userInfo.code;
        user.cardType = this.userInfo.codeType;
        user.cardId = this.userInfo.code;
      }
    },
    getCardType() {
      getCardType().then(res => {
        this.types = res.data.recordsList;
      });
    },
    nextStep(type) {
      // 如果没有登录，则提示用户登录。
      if (!this.userId) {
        this.$store.dispatch("ToggleNeedLogin", true);
        return false;
      }
      // 如果个人预约中，预约用户数为0，则添加默认用户。
      if (this.gr.visitorInfo.data.length == 0) {
        this.addDefaultUserInfoForPerson();
      }
      // 切换面板
      if (type == "gr") this.gr.curTab = 1;
      if (type == "td") this.td.curTab = 1;
      // 获取token值，添入提交项目中。
      this.gr.visitorInfo.token = getToken();
      this.td.visitorInfo.token = getToken();
    }
  },
  mounted() {
    getList(this.routeItem.id).then(res => {
      let articals = res.data.recordsList;
      if (res.data.count == 0) {
        return false;
      }
      let personalArtical = articals.find(item => {
        return item.title == "个人预约";
      });
      let companyArtical = articals.find(item => {
        return item.title == "团队预约";
      });
      if (personalArtical) this.gr.notice = personalArtical["content"];
      if (companyArtical) this.td.notice = companyArtical["content"];
    });
    this.gr.visitorInfo.visitDate = this.defaultGrDate;
    this.td.visitorInfo.visitDate = this.defaultTdDate;
  }
};
</script>

<style lang="less">
.cardType .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
.visit-appointment {
  .tab-box {
    width: 320px;
    margin: 20px auto;
  }
  .form-wrap {
    background: #fcf6ea;
    margin-bottom: 10px;
    position: relative;
  }
  .people-form {
    .delete-people-btn {
      position: absolute;
      right: 0px;
      top: 0px;
    }
  }
}
.width-100.el-date-editor.el-input {
  width: 100%;
}

.save-qr-btn {
  border: 1px solid #ddd;
  padding: 5px 28px;
  background: #f5f5f5;
  border-radius: 4px;
  margin: 5px 0;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s;
}
.save-qr-btn:hover {
  background-color: #e9e9e9;
  color: #000;
}
</style>
